<template>
	<div class="theContent">
		<contentTitle title="子产品占比情况"><btnList :data="buttonList" :cur.sync="type" @onClick="onRefreshChart"></btnList></contentTitle>
		<contentBox class="theEchart" v-if="seriesDataList.length > 0">
			<pieRingChart ref="pieRingChart" 
				:seriesDataList="seriesDataList" 
				:unit="unit"
				:fontSize="[24,32,32]"
				:itemGap="40"
				:colorList="colorList" />
		</contentBox>
	</div>
</template>

<script>
import contentBox from '@/components/contentBox.vue';
import contentTitle from '@/components/contentTitle.vue';
import btnList from '@/components/btnList.vue';
import pieRingChart from '@/components/pieRingChart.vue';
import { listByProduct } from '@/api/category.js';
import baseCategoryMixins from './mixins/baseCategoryMixins.js';

export default {
	name: 'Left3CategoryProduct',
	components: {
		contentBox,
		contentTitle,
		btnList,
		pieRingChart
	},
	mixins: [baseCategoryMixins],
	data() {
		return {
			query: {
				year: new Date().getFullYear(),
				categoryId: 1 //1-香榧 2-笋竹 3-山黄精
			},
			listSale: [],
			type: 1, //1-产值  2-产量
			buttonList: [{ value: 1, label: '产值' }, { value: 2, label: '产量' }],
			colorList: ['#0198F3', '#F7931A', '#00CE7D', '#884FFC']
		};
	},
	computed: {
		seriesDataList() {
			return this.listSale.map(item => {
				return {
					name: item.name,
					value: this.type == 1 ? item.amount : item.count,
					percent: this.type == 1 ? item.amountPercent : item.countPercent
				};
			});
		},
		unit() {
			return this.type == 1 ? '万元' : '吨';
		}
	},

	methods: {
		loadData() {
			listByProduct(this.query).then(result => {
				console.log('listByProduct Result = ', result);
				this.listSale = result.data;

				//计算百分比值
				let countTotal = eval(this.listSale.map(item => item.count).join('+'));
				let amountTotal = eval(this.listSale.map(item => item.amount).join('+'));
				this.listSale.forEach(item => {
					item.countPercent = ((item.count * 100) / countTotal).toFixed(2) + '%';
					item.amountPercent = ((item.amount * 100) / amountTotal).toFixed(2) + '%';
				});

				this.onRefreshChart();
			});
		},

		onRefreshChart() {
			//通过参数绑定传值  :cur.sync="type"
			this.$nextTick(() => {
				this.$refs.pieRingChart.initOption();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.theContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;

	.theEchart {
		flex: 1;
	}
	.theButton {
		margin: 0 10px;
		font-size: 20px;
		line-height: 38px;
		color: #ffffff;
		text-align: center;
		cursor: pointer;
	}
	.active {
		background: linear-gradient(180deg, rgba(247, 147, 26, 0) 0%, rgba(247, 147, 26, 0.4) 100%);
	}
}
</style>
